﻿@model xraiding.ViewModels.CharacterEditViewModel

@{
    ViewBag.Title = "Getting Started";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Getting Started</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#Name").focus();
        $('#Class').change(function () {
            $('#Class option:selected').each(function () {
                $.getJSON("/CharacterManager/GetRoles/", { classId: $(this).val() }, function (data) {
                    $('#PreferredRole >option').remove();
                    $('#SecondaryRole >option').remove();
                    $.each(data, function (index, value) {
                        var opt = "<option value='" + value.RoleId + "'>" + value.Description + "</option>";
                        $('#PreferredRole').append(opt);
                        $('#SecondaryRole').append(opt);
                        $('#PreferredRole').removeAttr('disabled');
                        $('#SecondaryRole').removeAttr('disabled');
                    });
                });
            });
        });
    });
</script>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Add your main character</legend>
      
        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Realm)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Realm)
            @Html.ValidationMessageFor(model => model.Realm)
        </div>
        
        <div class="editor-label">
            @Html.LabelFor(model => model.SelectedFaction)
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(model => model.SelectedFaction, new SelectList(Model.Factions, "FactionId", "Name"))
            @Html.ValidationMessageFor(model => model.SelectedFaction)        
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Class)
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(model => model.Class, new SelectList(Model.Classes, "ClassId", "Name"))
            @Html.ValidationMessageFor(model => model.Class)        
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.PreferredRole)
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(model => model.PreferredRole, new SelectList(Model.Roles, "RoleId", "Name"), new { disabled = "disabled" })                        
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.SecondaryRole)
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(model => model.SecondaryRole, new SelectList(Model.Roles, "RoleId", "Name"), new { disabled = "disabled" })                        
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Level)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Level)
            @Html.ValidationMessageFor(model => model.Level)
        </div>
        
        <div class="editor-label">
            @Html.LabelFor(model => model.ItemLevel)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.ItemLevel, new { @style = "width:30px;" })
            @Html.ValidationMessageFor(model => model.ItemLevel)
        </div>
        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}
